<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>Detalle del aplicante</title>

<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/gen-style.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/mkv/jquery-ui.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/makovo-style.css"
	type="text/css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/style/jquery.steps.css"
	type="text/css" />

<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-2.1.3.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/gen.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/spin.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/pdfobject_source.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/auxiliares.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				if(validaSesion("${sessionScope.LoginMenu}"))
					document.location="index.jsp";
				var mPDF;
				var mCall = new Gen.AjaxCall();

				$('.pdf-item').click(function() {
					if ($(this).attr('path') != null)
						showPDF($(this).attr('path'));
					else
						$('#error-mod').dialog('open');
				});

				$('#pdf-document').dialog({
					autoOpen : false,
					modal : true,
					width : 900,
					height : 770,
					open : function(event, ui) {

					},
					close : function(event, ui) {
					}
				});

				$('#error-mod').dialog({
					autoOpen : false,
					modal : true,
					width : 500,
					height : 300,
					open : function(event, ui) {

					},
					close : function(event, ui) {
					}
				});

				$('#formats-mod').dialog({
					autoOpen : false,
					modal : true,
					width : 500,
					height : 300,
					open : function(event, ui) {

					},
					close : function(event, ui) {
					}
				});
				
				$('#printFormat').bind('click',function(){
					$('#formats-mod').dialog("open");
				});
				
				$('#printFormat0').bind('click',function(){
					var info = "curp=" + $('#curp').html();
					window.open('<%=request.getContextPath()%>/tareas/formatoUnion.jsp?'+ info);
				});
				$('#printFormat1').bind('click',function(){
					var info = "curp=" + $('#curp').html();
					window.open('<%=request.getContextPath()%>/tareas/formatoSueldo.jsp?' + info);
				});

				function getApplicantDetails() {
					mCall.post('ajax/GetApplicantDetails.action', {}, function(a) {
						if (a != null) {
							fillApInfo(a.applicantInfo);
							fillDocsInfo(a.applicantInfo.docs);
							fillSocInfo(a.socInfo);
							fillProjInfo(a.project);
							createAccordion(a.step);

							hideOverlay();
						}
					}, function(er) {
					});
				}

				function showPDF(u) {
					mPDF = new PDFObject({
						url : u,
						height : 700
					}).embed('pdf-viewer');

					$('#pdf-document').dialog('open');
				}

				function fillApInfo(info) {
					if (info == null)
						return;

					$('#curp').text(info.curp);
					$('#name').text(info.name);
					$('#last-name').text(info.lastName);
					$('#second-last').text(info.secondLastName);
					$('#birth').text(info.birth);
					$('#phone').text(info.phone);

					$('#idType').text(info.typeID.toUpperCase());
					$('#civState').text(info.MState.toUpperCase());

					$('#printFormat0').show();

					$('#appAddress').append(
							"Calle: " + info.address.street.toUpperCase() + " Num ext: " + info.address.extNum.toUpperCase()
									+ " Num int: " + info.address.intNum.toUpperCase() + "<br/>Localidad: "
									+ info.address.loc.toUpperCase() + " " + info.address.city.toUpperCase() + ", "
									+ info.address.state.toUpperCase() + " <br/>CP  : " + info.address.cp.toUpperCase()
									+ "<br/>Latitud : " + info.address.lat + "<br/>Longitud : " + info.address.lonng);

					if (info.appStep == 102)
						$('#approved-info').show();
					else if (info.appStep == 103)
						$('#rejected-info').show();
				}

				function fillDocsInfo(docs) {
					if (docs == null)
						return;

					for (var i = 0; i < docs.length; i++) {
						$('#info-' + docs[i].typeDoc.identifier).removeClass('error');
						$('#info-' + docs[i].typeDoc.identifier).find('.item-error').hide();
						$('#info-' + docs[i].typeDoc.identifier).attr('path', docs[i].path);

					}
				}

				function fillSocInfo(info) {
					if (info == null)
						return;

					$('#ent').text(info.ent.toUpperCase());
					$('#job-type').text(info.jobType.toUpperCase());
					$('#job').text(info.job.toUpperCase());
					$('#earn').text(info.earn);
					$('#dependants').text(info.dependants);
					$('#ant').text(info.ant);

					$('#printFormat1').show();

					$('#jobAddress').append(
							"Calle: " + info.address.street.toUpperCase() + " Num ext: " + info.address.extNum.toUpperCase()
									+ " Num int: " + info.address.intNum.toUpperCase() + "<br/>Localidad: "
									+ info.address.loc.toUpperCase() + " " + info.address.city.toUpperCase() + ", "
									+ info.address.state.toUpperCase() + " <br/>CP  : " + info.address.cp.toUpperCase()
									+ "<br/>Latitud : " + info.address.lat + "<br/>Longitud : " + info.address.lonng);
				}

				function fillProjInfo(info) {
					if (info == null)
						return;

					$('#projId').text(info.seq.toUpperCase());
					$('#projType').text(info.projType.toUpperCase());
					$('#projSet').text(info.setType.toUpperCase());

					$('#projAddress').append(
							"Calle: " + info.address.street.toUpperCase() + " Num ext: " + info.address.extNum.toUpperCase()
									+ " Num int: " + info.address.intNum.toUpperCase() + "<br/>Localidad: "
									+ info.address.loc.toUpperCase() + " " + info.address.city.toUpperCase() + ", "
									+ info.address.state.toUpperCase() + " <br/>CP  : " + info.address.cp.toUpperCase()
									+ "<br/>Latitud : " + info.address.lat + "<br/>Longitud : " + info.address.lonng);
				}

				function createAccordion(step) {
					for (var i = 1; i <= step; i++)
						$('[step=' + i + ']').show();

					$("#accordion").accordion({
						heightStyle : "content"
					});
				}

				showOverlay(true);
				getApplicantDetails();

			});
</script>
</head>
<body>
	<div style="width: 1100px; margin: 0 auto">
		<div class="headerMK">
			<div class="logo">
				<span class="hdTitulo">Sistema para Aplicación de Subsidio
					2015</span>
			</div>
			<div
				style="font-size: 0.26em; top: -50px; position: relative; width: 500px; float: right; text-align: right; padding-right: 10px">
				<i>${sessionScope.LoginNombre}</i><b><a
					href="/makovo/paginas/index.jsp"> - Cerrar Sesión</a></b>
			</div>
		</div>
		<div class="divContenido">
			<a href="<%=request.getContextPath()%>/paginas/menu.jsp">Regresar
				al menú</a><br />

			<h3>Detalle de Aplicante</h3>
			<div class="detail-approve-info rejected" id="rejected-info"
				style="display: none;">Aplicante rechazado</div>
			<div class="detail-approve-info approved" id="approved-info"
				style="display: none;">Aplicante aprobado</div>
			<div>
				<div id="accordion" style="width: 800px; margin: 0px auto">
					<h3 step="2" style="display: none;">Información básica</h3>
					<div step="2" style="display: none;">
						<table style="border-spacing: 1em; border-collapse: separate;">
							<tr>
								<td>CURP:</td>
								<td><span id="curp" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Nombre (s):</td>
								<td><span id="name" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Apellido paterno:</td>
								<td><span id="last-name" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Apellido materno:</td>
								<td><span id="second-last" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Fecha Nacimiento:</td>
								<td><span id="birth" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Teléfono:</td>
								<td><span id="phone" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Tipo de identificación:</td>
								<td><span id="idType" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Estado civil:</td>
								<td><span id="civState" style="color: #333333;"></span></span></td>
							</tr>
							<tr>
								<td>Domicilio aplicante:</td>
								<td><span id="appAddress" style="color: #333333;"></span></td>
							</tr>
						</table>
						<br />

					</div>
					<h3 step="3" style="display: none;">Información Socioeconómica</h3>
					<div step="3" style="display: none;">
						<table style="border-spacing: 1em; border-collapse: separate;">
							<tr>
								<td>Empresa:</td>
								<td><span id="ent" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Tipo trabajo:</td>
								<td><span id="job-type" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Puesto:</td>
								<td><span id="job" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Ingreso mensual:</td>
								<td><span id="earn" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Dependientes económicos:</td>
								<td><span id="dependants" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Antigüedad:</td>
								<td><span id="ant" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Domicilio empesa:</td>
								<td><span id="jobAddress" style="color: #333333;"></span></td>
							</tr>
						</table>
					</div>
					<h3 step="4" style="display: none;">Información del proyecto</h3>
					<div step="4" style="display: none;">
						<table style="border-spacing: 1em; border-collapse: separate;">
							<tr>
								<td>Folio proyecto:</td>
								<td><span id="projId" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Tipo proyecto:</td>
								<td><span id="projType" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Tipo asentamiento:</td>
								<td><span id="projSet" style="color: #333333;"></span></td>
							</tr>
							<tr>
								<td>Domicilio proyecto:</td>
								<td><span id="projAddress" style="color: #333333;"></span></td>
							</tr>
						</table>
					</div>
					<h3 step="5" style="display: none;">Documentación personal</h3>
					<div step="5" style="display: none;">
						<table>
							<tr>
								<td><div class="pdf-item error" id="info-ide">
										<div class="title">Identificación</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-curp">
										<div class="title">CURP</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-nac">
										<div class="title">Acta de nacimiento</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-mat">
										<div class="title">Acta de matrimonio</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
							</tr>
							<tr>
								<td><br /></td>
							</tr>
							<tr>
								<td><div class="pdf-item error" id="info-ing">
										<div class="title">Comprobante de ingreso</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-dom">
										<div class="title">Comprobante de domicilio</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-esc">
										<div class="title">Constancia de escrituras</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-ise">
										<div class="title">Cédula de información socioeconónica</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
							</tr>
						</table>
					</div>
					<h3 step="6" style="display: none;">Documentación vivienda</h3>
					<div step="6" style="display: none;">
						<table>
							<tr>
								<td><div class="pdf-item error" id="info-inm">
										<div class="title">Fachada del inmueble</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-geo">
										<div class="title">Imagen geolocalización</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
							</tr>
							<tr>
								<td colspan="4"><p>Subsidio</p></td>
							</tr>
							<tr>
								<td><div class="pdf-item error" id="info-pdp">
										<div class="title">Presupuesto proyecto</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-plp">
										<div class="title">Planos proyecto</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<!-- 								<td><div class="pdf-item error" id="info-ss"> -->
								<!-- 										<div class="title">Solicitud de subsidio</div> -->
								<!-- 										<div class="item-error">Documento no disponible</div> -->
								<!-- 										<div class="type-item">PDF</div> -->
								<!-- 									</div></td> -->
								<!-- 								<td><div class="pdf-item error" id="info-crs"> -->
								<!-- 										<div class="title">Certificado de recepción de subsidio</div> -->
								<!-- 										<div class="item-error">Documento no disponible</div> -->
								<!-- 										<div class="type-item">PDF</div> -->
								<!-- 									</div></td> -->

							</tr>
						</table>
					</div>
					<h3 step="7" style="display: none;">Documentación de subsidio</h3>
					<div step="7" style="display: none;">
						<table>
							<tr>
								<td><div class="pdf-item error" id="info-cedula">
										<div class="title">Cédula de información socioeconónica</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-solicitud">
										<div class="title">Solicitud de subsidio</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>
								<td><div class="pdf-item error" id="info-recepcion">
										<div class="title">Certificado de recepción de subsidio</div>
										<div class="item-error">Documento no disponible</div>
										<div class="type-item">PDF</div>
									</div></td>

							</tr>
						</table>
					</div>
				</div>

			</div>

			<div style="width: 100%; text-align: center; margin-top: 15px;">
				<button class="t-btn large hor-opening" id="printFormat">IMPRIMIR
					FORMATOS</button>
				<button class="t-btn large hor-opening" id="printProfile">IMPRIMIR
					PERFIL</button>
			</div>

			<div id="pdf-document">
				<div id="pdf-viewer"></div>
			</div>
		</div>
		<div id="error-mod">
			<div style="color: rgba(180, 0, 0, .8)">
				El documento no puede ser encontrado. <br>Por favor considere
				la recarga.
			</div>
		</div>

		<div id="formats-mod">
			<div style="color: rgba(180, 0, 0, .8)">
				<button class="t-btn large hor-opening" style="display: none;"
					id="printFormat0">IMPRIMIR FORMATO ESTADO CIVIL</button>
				<button class="t-btn large hor-opening" style="display: none;"
					id="printFormat1">IMPRIMIR FORMATO DE SALARIO</button>
			</div>
		</div>
	</div>
</body>
</html>